<template>
  <div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold mb-4">JSON 文件解析与展示</h2>

    <el-card class="box-card mb-6">
      <el-form label-width="100px">
        <el-form-item label="选择 JSON 文件">
          <el-upload
              ref="uploadRef"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :file-list="fileList"
              accept=".json"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                请选择一个 JSON 文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="jsonData.length > 0" class="box-card">
      <template #header>
        <div class="card-header">
          <span>文件内容</span>
        </div>
      </template>
      <div v-for="(item, index) in jsonData" :key="index" class="mb-4 p-4 border rounded">
        <h4 class="text-lg font-semibold mb-2">条目 {{ index + 1 }}</h4>
        <p><strong>Instruction:</strong> {{ item.instruction }}</p>
        <p><strong>Input:</strong> {{ item.input }}</p>
        <p><strong>Output:</strong> {{ item.output }}</p>
        <p><strong>System:</strong> {{ item.system }}</p>
      </div>
    </el-card>

    <div v-if="parseError" class="mt-4 text-sm text-red-500">
      解析错误: {{ parseError }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElUpload, ElButton, ElForm, ElFormItem, ElCard } from 'element-plus';
import 'element-plus/dist/index.css'; // 导入 Element Plus 样式

const uploadRef = ref(null);
const fileList = ref([]);
const jsonData = ref([]); // 用于存储解析后的 JSON 数据
const parseError = ref(''); // 用于存储解析错误信息

// 文件选择变化时的处理函数
const handleFileChange = (file, files) => {
  // 只处理第一个文件（Element Plus limit=1）
  const selectedFile = file.raw;
  fileList.value = [file]; // 更新文件列表显示

  if (selectedFile) {
    const reader = new FileReader();

    reader.onload = (e) => {
      try {
        // 尝试解析 JSON 文件内容
        const parsedData = JSON.parse(e.target.result);

        // 检查解析后的数据是否是数组且符合预期格式 (简单检查第一个元素)
        if (Array.isArray(parsedData) && parsedData.length > 0 &&
            parsedData[0].hasOwnProperty('instruction') &&
            parsedData[0].hasOwnProperty('input') &&
            parsedData[0].hasOwnProperty('output') &&
            parsedData[0].hasOwnProperty('system')) {
          jsonData.value = parsedData; // 存储解析成功的数据
          parseError.value = ''; // 清除错误信息
          ElMessage.success('JSON 文件解析成功！');
        } else {
          // 数据格式不符合预期
          jsonData.value = [];
          parseError.value = 'JSON 文件格式不符合预期。请确保文件是包含指定字段的数组。';
          ElMessage.error('JSON 文件格式不符合预期。');
          // 清空文件输入
          if (uploadRef.value) {
            uploadRef.value.clearFiles();
          }
          fileList.value = [];
        }

      } catch (error) {
        // JSON 解析失败
        jsonData.value = [];
        parseError.value = `JSON 解析失败: ${error.message}`;
        ElMessage.error(`JSON 解析失败: ${error.message}`);
        // 清空文件输入
        if (uploadRef.value) {
          uploadRef.value.clearFiles();
        }
        fileList.value = [];
      }
    };

    reader.onerror = () => {
      jsonData.value = [];
      parseError.value = '文件读取失败。';
      ElMessage.error('文件读取失败。');
      // 清空文件输入
      if (uploadRef.value) {
        uploadRef.value.clearFiles();
      }
      fileList.value = [];
    };

    // 读取文件内容为文本
    reader.readAsText(selectedFile);
  }
};

// 文件移除时的处理函数
const handleFileRemove = () => {
  jsonData.value = []; // 清空数据
  parseError.value = ''; // 清空错误信息
  fileList.value = []; // 清空文件列表
};

</script>

<style scoped>
.container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.box-card :deep(.el-card__header) {
  padding: 15px 20px;
}

.box-card :deep(.el-card__body) {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mb-4 {
  margin-bottom: 1rem;
}

.p-4 {
  padding: 1rem;
}

.border {
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
}

.rounded {
  border-radius: 0.25rem;
}

.text-red-500 {
  color: #f56c6c;
}

.mt-4 {
  margin-top: 1rem;
}

.text-sm {
  font-size: 0.875rem;
}
</style>
